<template>
  <div id="app">
    <img :src="forms[0].form.dataURL">
      <slide :slides="ais[forms[0].id]"></slide>
  </div>
</template>

<script>
  import slide from './components/slide'
  import axios from 'axios'
export default {
    components:{
      slide
    },
  props: {

  },
  data() {
    return {
      isShow: true,
      forms: [
        {
          id: "id0",
          form: {
            dataURL:require("./assets/images/1.png"),
          }
        },
        {
          id: "id1",
          form: {
            dataURL:require("./assets/images/1.png"),
          }
        },
      ],
      ais: {
        id0: [
          {
            id: "ai0",
            status: 3,
            dataURL:require("./assets/images/1.png"),
          },
          {
            id: "ai1",
            status: 2,
            dataURL:require("./assets/images/2.png"),
          },
          {
            id: "ai2",
            status: 1,
            dataURL:require("./assets/images/3.png"),
          },
          {
            id: "ai3",
            status: 0,
            dataURL:require("./assets/images/4.png"),
          },
      ]
    }
    }
  },
 mounted() {
   for(let item of this.ais[this.forms[0].id]){
     if(item.status===3){

       axios.get('static/data.json')
         .then(res => {
           item.dataURL=res.data.url;
         }).catch(err=>{})


       // fetch('static/data.json').then(res => {
       //   return res.json();
       // }).then(res => {
       //   item.dataURL=res.url;
       // }).catch(err=>{})
     }
   }
 }
}
</script>

<style>
li{
  list-style: none;
  margin-right: 25px;
}
#app{
  display: flex;
}
img{
  width: 100px;
  height: 100px;
}
ul{
  display: flex;
  padding: 0;
  margin: 0;
}

</style>
